<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>null</title>
</head>
<body>
<div id="container" class="container">
    <div class="col-md-9">
        <div class="col-md-12 r1"
             style="background-color: #e4e4e4; height: 40px">
            <div class="col-md-8" style="margin-top: 5px">
                <B style="color: #c4c4c4; font-size: 20px">物品信息</B>
            </div>

            <div class="col-md-4" style="margin-top: 4px;">
                <a v-show="userInfo.id!='null'" @click="collect" class="btn">
                    <B style="color: #ff0000; font-size: 18px;">{{collectState===true?'已收藏':'收藏'}}</B>
                </a>
            </div>

        </div>

        <div class="col-md-12 r2"
             style="background-color: #f9f9f9; padding: 0px; padding-bottom: 15px">
            <div class="col-md-12" style="margin-top: 40px;">
                <div class="col-md-7" align="center;">
                    <div style="width: 100%" align="center">
                        <img :src="'https://yilutangping.oss-cn-shenzhen.aliyuncs.com/userProfileImage/'+goodInfo.picture"
                             width="100%"
                             id="img-a">
                    </div>
                    <!--滚动栏暂时不用-->
                    <!--                    -->
                    <!--                    <div class="col-md-12"-->
                    <!--                         style="padding-left: 0px; padding-right: 0px; margin-top: 10px">-->
                    <!--                        <div class="swiper-container">-->
                    <!--                            <div class="swiper-wrapper">-->
                    <!--                                <div class="swiper-slide">-->
                    <!--                                    <img src="..${goodInfo.photoUrl}" height="100%"-->
                    <!--                                         width="85%">-->
                    <!--                                </div>-->

                    <!--                                &lt;!&ndash;                                <c:forEach var="image" items="${images}">&ndash;&gt;-->
                    <!--                                &lt;!&ndash;                                    <div class="swiper-slide">&ndash;&gt;-->
                    <!--                                &lt;!&ndash;                                        <img src="..${image.url}" height="100%"&ndash;&gt;-->
                    <!--                                &lt;!&ndash;                                             width="90%">&ndash;&gt;-->
                    <!--                                &lt;!&ndash;                                    </div>&ndash;&gt;-->
                    <!--                                &lt;!&ndash;                                </c:forEach>&ndash;&gt;-->
                    <!--                            </div>-->
                    <!--                            <div class="swiper-button-next"></div>-->
                    <!--                            <div class="swiper-button-prev"></div>-->
                    <!--                            <div class="swiper-pagination"></div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <!--                    -->
                </div>

                <div class="col-md-5">
                    <h3 style="margin-left: 15px">
                        <B>{{goodInfo.title}}</B>
                    </h3>
                    <div style="height: 50px"></div>
                    <div class="col-md-4" style="padding: 0px">
                        <p style="color: #666666; height: 40px">
                            <B>价格</B>
                        </p>
                        <p style="color: #666666; height: 40px">
                            <B>卖家</B>
                        </p>
                        <p style="color: #666666; height: 40px">
                            <B>物品类型</B>
                        </p>
                        <p style="color: #666666; height: 40px">
                            <B>发布时间</B>
                        </p>
                    </div>

                    <div class="col-md-8" style="padding: 0px">
                        <p style="color: red; height: 40px; font-size: 20px">￥{{goodInfo.price}}</p>
                        <p style="color: #808080; height: 40px">{{sellerInfo.nickName}}</p>
                        <p style="color: #808080; height: 40px">{{goodInfo.secondClass}}</p>
                        <p style="color: #808080; height: 40px">{{goodInfo.createDate}}</p>
                    </div>

                    <div class="col-md-12" style="padding: 0px">
                        <div v-show="userInfo.id!=goodInfo.userId" onclick="connect()" class="col-md-5 r-c">
                            <B style="font-size: 20px; color: #e2e2e2">联系卖家</B>
                        </div>

                        <div v-if="goodInfo.saleState==0&&userInfo.id!=goodInfo.userId">
                            <button @click="buyButton" class="col-md-5 r-b pull-right">
                                <B style="font-size: 20px; color: #e2e2e2">购买</B>
                            </button>
                        </div>
                        <div>
                            <div v-show="userInfo.id==goodInfo.userId" onclick="connect1()">
                                <div class="col-md-5 r-b">
                                    <B style="font-size: 20px; color: #e2e2e2">编辑</B>
                                </div>
                            </div>
                        </div>

                        <div v-if="goodInfo.saleState!=0">
                            <div class="col-md-5 r-x pull-right">
                                <B style="font-size: 20px; color: #bbbbbb">已下架</B>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12" style="margin-top: 50px" align="right">
                        <p id="sellerOther">
                            <!--                            <a-->
                            <!--                                    href="/wzh-secondshop/goods/userGoods?userId=${goodInfo.userId}">查看卖家其他物品</a>-->
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12 r1"
             style="background-color: #e4e4e4; height: 40px; margin-top: 20px;">
            <div class="col-md-6" style="margin-top: 5px">
                <B style="color: #c4c4c4; font-size: 20px">物品描述</B>
            </div>
        </div>

        <div class="col-md-12 r2"
             style="background-color: #f9f9f9; height: 150px">
            <div class="col-md-12" style="margin-top: 20px">
                <p style="color: #b0b0b0;">&emsp;&emsp;{{goodInfo.introduction}}</p>
            </div>
        </div>

    </div>

    <div class="col-md-3" style="padding-right: 0px;">
        <div class="col-md-12 r2" style="background-color: #f9f9f9; padding-bottom: 15px">
            <!--卖出的商品-->
            <div id="adv-bar" class="col-md-12" style="margin-top: 5px; padding: 0px;">
                <div class="col-md-12" align="center">
                    <B style="font-size: 16px; color: #c4c4c4">广告</B>
                </div>
                <div class="col-md-12"  id="orderBox"
                     style="overflow-y: auto; height: 450px; padding: 5px; background-color: #ffffff;">
                    <div class="col-md-12" align="center" style="margin-top: 150px">
                        <img src="https://yilutangping.oss-cn-shenzhen.aliyuncs.com/userProfileImage/guangyilutangping.jpg" style="width:95% ; height:170px;">
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
    //为jQ扩展查询url指定参数的方法。
    (function ($) {
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    })(jQuery);
    $("#header").load("../home/header.html");
    $("#comment-ui").load("comment.html");
    $("#footer").load("../home/footer.html");
</script>

<script type="text/javascript">

    function connect1() {
        window.open("/goods/modifyGood.html?gid=" + $.getUrlParam("goodsId"), "_blank");
    }

    let vmGoodInfo = new Vue({
        el: '#container',
        created() {
            // 获取商品信息
            let goodsId = $.getUrlParam("goodsId");
            console.log('goodInfo', goodsId);
            axios.get("/goods/findById/" + goodsId).then(resp => {
                if (resp.data.code !== 20000) {
                    console.log('获取商品信息', resp.data.message);
                    return;
                }
                console.log('goodInfo', resp);
                this.goodInfo = resp.data.data;
                getSellerOther(resp.data.data.userId);
                //二级分类  1-1洗衣液洗衣粉 1-2杯子 1-3沐浴露 2-4上衣 2-5裤子 3-6运动鞋 3-7休闲鞋 4-8其他
                switch (this.goodInfo.secondClass) {
                    case "1":
                        this.goodInfo.secondClass = "洗衣液洗衣粉";
                        break;
                    case "2":
                        this.goodInfo.secondClass = "杯子";
                        break;
                    case "3":
                        this.goodInfo.secondClass = "沐浴露";
                        break;
                    case "4":
                        this.goodInfo.secondClass = "上衣";
                        break;
                    case "5":
                        this.goodInfo.secondClass = "裤子";
                        break;
                    case "6":
                        this.goodInfo.secondClass = "运动鞋";
                        break;
                    case "7":
                        this.goodInfo.secondClass = "休闲鞋";
                        break;
                    case "8":
                        this.goodInfo.secondClass = "其他";
                        break;
                    default:
                        break;
                }
                //    获取卖家信息
                axios.get("/user/id/" + resp.data.data.userId).then((resp2) => {
                    if (resp2.data.code !== 20000) {
                        console.log('获取卖家信息', resp2.data.message);
                        return;
                    }
                    console.log('sellerInfo1', resp2.data);
                    this.sellerInfo = resp2.data.data;
                    //获取用户信息
                    axios(
                        {
                            url: "/user/preInfo",
                            headers: {'Content-Type': 'application/json;charset=UTF-8'},
                            method: "POST",
                            // dataType: "json",
                            // data: JSON.stringify(postData)
                            data: JSON.stringify(11)
                        }
                    ).then((resp3) => {
                        if (resp3.data.code !== 20000) {
                            console.log('获取用户信息', resp3.data.message);
                            return;
                        }
                        if (resp3.data.data == null) {
                            console.log('userInfo', resp3);
                            return;
                        }
                        this.userInfo = resp3.data.data;
                        //获取搜藏信息；
                        axios.get("/goods/isCollected/" + this.userInfo.id + "/" + this.goodInfo.id).then((resp4) => {
                            if (resp4.data.code !== 20000) {
                                console.log('获取搜藏信息', resp4.data.message);
                            } else {
                                //修改收藏状态信息：this.collectState;
                                this.collectState = resp4.data.data;
                            }
                        });
                    });
                });
            });
        },
        methods: {
            collect() {
                if(this.userInfo.isActive=='null'){
                    alert("无权操作");
                    return;
                }
                if (this.collectState) {
                    //如果收藏了
                    //     发送axios改变状态
                    //    成功，则更新状态
                    axios.get("/goods/cancelCollect/" + this.userInfo.id + "/" + this.goodInfo.id).then(resp => {
                        if (resp.data.code !== 20000) {
                            console.log(resp.data.message);
                            alert("取消收藏失败,请稍后再试");
                        } else {
                            this.collectState = false;
                            alert("取消收藏成功");
                        }
                    }, err => {
                        alert("网络连接失败,请稍后再试");
                    })
                } else {
                    //    如果没收藏
                    //     发送axios改变状态
                    //    成功，则更新状态
                    axios.get("/goods/collect/" + this.userInfo.id + "/" + this.goodInfo.id).then(resp => {
                        if (resp.data.code !== 20000) {
                            console.log(resp.data.message);
                            alert("收藏失败,请稍后再试");
                        } else {
                            this.collectState = true;
                            alert("收藏成功");
                        }
                    }, err => {
                        alert("网络连接失败,请稍后再试");
                    })
                }
            },
            //确认购买
            confirmBuy(_this) {
                console.log(this);
                let postData = {
                    goodName: _this.goodInfo.title,
                    seller: _this.sellerInfo.nickName,
                    sellerId: _this.sellerInfo.id,
                    customer: _this.userInfo.nickName,
                    customerId: _this.userInfo.id,
                    goodId: _this.goodInfo.id,
                    money: _this.goodInfo.price
                }
                console.log(postData);
                axios(
                    {
                        url: '/order/create',
                        contentType: "application/json;charset=UTF-8",
                        method: "POST",
                        // dataType: "json",
                        // data: JSON.stringify(postData)
                        data: postData
                    }
                ).then((res) => {
                    //打印订单id
                    let orderId = res.data.data;
                    console.log(orderId);
                    window.open("/user/orderInfo.html?orderId=" + orderId, "_self");
                }, err => {
                    alert('商品不存在，请刷新网页')
                })
            },
            //点击购买
            buyButton() {
                if (this.userInfo.id == "null") {
                    alert("请先登录");
                    return;
                }
                let _this = this;
                var dblChoseAlert = simpleAlert({
                    "content": "您即将购买该物品!",
                    "buttons": {
                        "确定": function () {
                            dblChoseAlert.close();
                            _this.$options.methods.confirmBuy(_this);
                        },
                        "取消": function () {
                            dblChoseAlert.close();
                        }
                    }
                })
            },
        },
        data: {
            collectState: false,
            sellerInfo: {
                code: "null",
                createDate: "null",
                email: "null",
                id: "null",
                isActive: "null",
                modifyDate: "null",
                nickName: "null",
                password: "null",
                phoneNumber: "null",
                picture: "defaultProfileImage.jpg",
                power: "null",
                sex: "null",
                state: "null"
            },
            userInfo: {
                id: "null",
                nickName: "null",
                email: "null",
                password: "null",
                phoneNumber: "null",
                sex: "null",
                createDate: "null",
                modifyDate: "null",
                picture: "defaultProfileImage.jpg",
                power: "null",
                state: "null",
                isActive: "null",
                code: "null",
            },
            goodInfo: {
                createDate: "null",
                firstClass: "null",
                id: "null",
                introduction: "null",
                modifyDate: "null",
                picture: "defaultProfileImage.jpg",
                price: "null",
                saleState: "null",
                secondClass: "null",
                state: "null",
                stock: "null",
                title: "null",
                userId: "null",
                visits: "null",
            }
        },
    })
</script>


<script type="text/javascript">
    $(function () {
        $(".swiper-slide img").mouseover(function () {
            var url = $(this).attr("src");
            $("#img-a").attr("src", url);
        })


    })

    function getSellerOther(result){
        $("#sellerOther").append(
            "<a href='/goods/userGood.html?userId="+result+"'>查看卖家其他物品</a>"
        )
    }

</script>
<script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    });
</script>
<!--
<script type="text/javascript">
    function collect() {
        var collect = {
            "goodId": "${goodInfo.id}",
            "goodName": "${goodInfo.name}",
            "userId": "${sessionScope.user.id}"
        };
        $.ajax({
            type: "POST",
            url: "/wzh-secondshop/collect/insert",
            contentType: "application/json", //必须这样写
            dataType: "json",
            data: JSON.stringify(collect),//要提交是json字符串
            success: function (data) {
                if (data === false) {
                    alert("由于未知原因，收藏失败！");
                } else {
                    alert("收藏成功！");
                    $(window).attr('location', '/wzh-secondshop/goods/goodInfo?goodId=${goodInfo.id}');
                }
            }
        })
    }

    function replyFun(replyId, replyToUser) {
        // if (${sessionScope.user != null}) {
        if (false) {

            var replyDiv = document.getElementById(replyId);
            var toUser = "回复 " + replyToUser;
            var replyToUserId = "#" + replyId + "replyToUser";
            var replyText = "#" + replyId + "replyText";
            if (replyDiv.style.display === "none") {
                replyDiv.style.display = "";
            }
            $(replyToUserId).attr("value", replyToUser);
            $(replyText).attr("placeholder", toUser);
            console.log("value:" + $(replyToUserId).attr("value"));
            console.log("placeholder:" + $(replyText).attr("placeholder"));
        }
    }

    function closeReplyDiv(replyDiv) {
        document.getElementById(replyDiv).style.display = "none";
    }

    $(function () {
            var message = "${message}";
            if (message !== "" && message !== null) {
                alert(message);
            }
        }
    );

    function connect() {
        alert("卖家联系方式：\n手机号：${goodUser.mobile}\n邮箱：${goodUser.email}\n请选择自己方便的联系方式与卖家沟通！");
    }
</script>

<script type="text/javascript">
    function buyButton() {
        $.ajax({
            type: "POST",
            url: "/user/preInfo",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(123),
            success: function (data) {
                // alert("chenggong ");
                // console.log(userInfo.id);
                // console.log(data);
                if (data.code == 20000) {
                    console.log(data);
                }
            }
        })
        var dblChoseAlert = simpleAlert({
            "content": "您即将购买该物品!",
            "buttons": {
                "确定": function () {
                    dblChoseAlert.close();
                    getBuy();
                },
                "取消": function () {
                    dblChoseAlert.close();
                }
            }
        })
    }

    function getBuy() {
        // if (${sessionScope.user == null}) {
        if (false) {
            alert("请先登录！");
            $(window).attr('location', '/wzh-secondshop/login');
        } else {
            alert("我们正在为您创建订单！");
            var order = {
                // "goodName": "${goodInfo.name}",
                // "seller": "${goodInfo.goodUser.name}",
                // "sellerId": ${goodInfo.goodUser.id},
                // "customer": "${sessionScope.user.name}",
                // "customerId": "${sessionScope.user.id}",
                // "goodId": ${goodInfo.id},
                // "money": ${goodInfo.prise}
            };
            console.log(order);
            $.ajax({
                type: "POST",
                url: "/wzh-secondshop/user/order/create",
                contentType: "application/json", //必须这样写
                dataType: "json",
                data: JSON.stringify(order),//要提交是json字符串
                success: function (data) {
                    if (data === false) {
                        alert("由于未知原因，订单创建失败！");
                    } else {
                        alert("订单创建成功，请及时与卖家联系，线下验货交易！");
                        $(window).attr('location', '/wzh-secondshop/user/orderInfo?orderId=' + data);
                    }
                }
            });
        }
    }

</script>
-->
<script type="text/javascript" src="../statics/bootstrap-3.3.0/js/bootstrap.js"></script>
<script type="text/javascript" src="../statics/jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="../statics/jquery-ui-1.12.1/datepicker-zh-CN.js"></script>
</body>
</html>
